What is @zxing/browser?
@zxing/browser is an npm package that provides tools for barcode scanning and decoding directly in the browser. It leverages the ZXing library, which is a popular open-source barcode image processing library, to offer robust and efficient barcode scanning capabilities.
What are @zxing/browser's main functionalities?
Barcode Scanning from Video Stream
This feature allows you to scan barcodes directly from a video stream, such as from a webcam. The code initializes a `BrowserMultiFormatReader` and starts decoding from the video device, logging the result to the console.
const codeReader = new ZXing.BrowserMultiFormatReader();
codeReader.decodeFromVideoDevice(null, 'video', (result, err) => {
if (result) {
console.log(result.text);
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err);
}
});
Barcode Scanning from Image
This feature allows you to scan barcodes from an image element. The code initializes a `BrowserMultiFormatReader` and decodes the barcode from the specified image element, logging the result to the console.
const codeReader = new ZXing.BrowserMultiFormatReader();
const imgElement = document.getElementById('img');
codeReader.decodeFromImage(imgElement).then(result => {
console.log(result.text);
}).catch(err => {
console.error(err);
});
Barcode Scanning from URL
This feature allows you to scan barcodes from an image URL. The code initializes a `BrowserMultiFormatReader` and decodes the barcode from the specified image URL, logging the result to the console.
const codeReader = new ZXing.BrowserMultiFormatReader();
const imageUrl = 'https://example.com/barcode.png';
codeReader.decodeFromImageUrl(imageUrl).then(result => {
console.log(result.text);
}).catch(err => {
console.error(err);
});
Other packages similar to @zxing/browser
quagga
QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-time localization and decoding of various types of barcodes. It is similar to @zxing/browser in that it provides barcode scanning capabilities in the browser, but it is specifically designed for real-time applications and offers more customization options for barcode localization and decoding.
jsqr
jsQR is a pure JavaScript QR code reading library. It is similar to @zxing/browser in that it provides QR code scanning capabilities in the browser, but it is focused solely on QR codes and offers a lightweight and fast solution for QR code decoding.
dynamsoft-javascript-barcode
Dynamsoft JavaScript Barcode is a commercial barcode scanning library that supports a wide range of barcode types and offers high performance and accuracy. It is similar to @zxing/browser in that it provides comprehensive barcode scanning capabilities in the browser, but it is a paid solution with additional features and support.
ZXing
What is ZXing?
ZXing ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.
Browser layer
This is a library for enabling you to use with ease the ZXing for JS library on the browser. It includes features like scanning an <img>
element, as well as <video>
, images and videos from URLs and also it helps handling webcam use for scanning directly from a hardware connected camera. It does not offers support to any physical barcode readers or things like that.
See @zxing-js/library for the complete API including decoding classes and use outside of the browser.
See @zxing-js/ngx-scanner for using the library in Angular.
See @zxing-js/text-encoding for special character support in barcodes.
Usage (how to use)
Installation, import into app and usage examples in this section.
Instalation
Install via yarn, npm, etc:
yarn add @zxing/browser
npm i @zxing/browser
Or just import an script tag from your favorite NPM registry connected CDN:
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
How to import into your app
ES6 modules
<script type="module">
import { BrowserQRCodeReader } from '@zxing/browser';
const codeReader = new BrowserQRCodeReader();
</script>
Or asynchronously
<script type="module">
import('@zxing/browser').then({ BrowserQRCodeReader } => {
const codeReader = new BrowserQRCodeReader();
});
</script>
With AMD
<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
<script type="text/javascript">
require(['@zxing/browser'], ZXingBrowser => {
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
});
</script>
With UMD
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
<script type="text/javascript">
window.addEventListener('load', () => {
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
});
</script>
Using the API
Examples here will assume you already imported ZXingBrowser into your app.
Scan from webcam
Continuous scan (runs and decodes barcodes until you stop it):
const codeReader = new BrowserQRCodeReader();
const videoInputDevices = await ZXingBrowser.BrowserCodeReader.listVideoInputDevices();
const selectedDeviceId = videoInputDevices[0].deviceId;
console.log(`Started decode from camera with id ${selectedDeviceId}`);
const previewElem = document.querySelector('#test-area-qr-code-webcam > video');
const controls = await codeReader.decodeFromVideoDevice(selectedDeviceId, previewElem, (result, error, controls) => {
});
setTimeout(() => controls.stop(), 20000);
You can also use decodeFromConstraints
instead of decodeFromVideoDevice
to pass your own constraints for the method choose the device you want directly from your constraints.
Also, decodeOnceFromVideoDevice
is available too so you can await
the method until it detects the first barcode.
Scan from video or image URL
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
const source = 'https://my-image-or-video/01.png';
const resultImage = await codeReader.decodeFromImageUrl(source);
const resultVideo = await codeReader.decodeFromVideoUrl(source);
Scan from video or image HTML element
const codeReader = new ZXingBrowser.BrowserQRCodeReader();
const sourceElem = document.querySelector('#my-image-id');
const resultImage = await codeReader.decodeFromImageElement(sourceElem);
const resultVideo = await codeReader.decodeFromVideoElement(sourceElem);
Other scan methods
There's still other scan methods you can use for decoding barcodes in the browser with BrowserCodeReader
family, all of those and previous listed in here:
decodeFromCanvas
decodeFromImageElement
decodeFromImageUrl
decodeFromConstraints
decodeFromStream
decodeFromVideoDevice
decodeFromVideoElement
decodeFromVideoUrl
decodeOnceFromConstraints
decodeOnceFromStream
decodeOnceFromVideoDevice
decodeOnceFromVideoElement
decodeOnceFromVideoUrl
That's it for now.
List of browser readers
BrowserAztecCodeReader
BrowserCodeReader
(abstract, needs to be extend for use)BrowserDatamatrixCodeReader
BrowserMultiFormatOneDReader
BrowserMultiFormatReader
(2D + 1D)BrowserPDF417CodeReader
BrowserQRCodeReader
Customize BrowserCodeReader
options
You can also customize some options on the code reader at instantiation time. More docs comming soon.